<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0062)http://www.lesliefranke.com/files/reference/csscheatsheet.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>CSS Cheat Sheet</title>
<style type="text/css">
<!--
body {
	font-family: Arial, sans-serif;
	font-size: 8.5pt;
}

#wrapper {
	margin: 0px; 
	max-width: 1200px;
	background-color: #fff;
}

#heading {
	border-bottom: 1px solid #000;
	margin: 10px 15px 10px 85px;
}

#contentbox {
	margin-left: 90px;
	margin-right: 15px;
	top: 50px;
}		

#content1 {
	float: left;
	width:44%;
}

#content2 {
	float: right;
	width: 53%;
}

#sidebar1 {
		position: absolute;
		left:10px;
		width:75px;
		top:50px;
		text-align: right;
}

.section {
	border: 1px solid #000;
	margin: 4px;
	width: 100%;
}

.section th {
	border: 1px solid #000;
	color: #fff;
	background-color: #b63300;
	font-size: 9.5pt;
	
}
.section td {
	font-family: Arial, sans-serif;
	font-size: 8.5pt;
	vertical-align: top;
	border: 0;
}
.subheading {
	background-color: #b63300;
}
.subheading2 {
	background-color: #c6e7ef;
}
.evenrow {
	background-color: #eee;
}

h1 {
	margin: 0px;
	padding: 0px;
	font-size: 14pt;
}

h3 {
	margin: 0px 0px 3px 0px;
	padding: 0px;
	font-size: 11pt;
	border-bottom: 1px solid #000;
}

h4 {
	margin: 0px;
	padding: 0px;
	font-size: 10.5pt;
}
.exp {
	font-family: Arial, sans-serif;
	border-top: 1px solid #000;
	font-size: 7.5pt;
	clear: both;
	
}
.values {
	font-family: Arial, sans-serif;
	font-size: 7.75pt;
	background-color: #ffdba1;
	border: 1px solid #ccc;
	padding: 1px;
	margin: 1px;
}
.floatcontainer:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility:hidden; 
}
hr {
	display: none;
	}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="heading">
<h1>CSS CHEAT SHEET</h1>
</div>
<div id="contentbox">
<div id="content1">
<table class="section" border="1">
      <tbody><tr>
        <th>SYNTAX</th>
      </tr>
      <tr><td>
				<strong>Syntax</strong></td></tr>
	<tr><td>selector {property: value;}</td></tr>
			<tr><td><strong>External Style Sheet</strong></td></tr>
		<tr><td>&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;</td></tr>
<tr><td><strong>Internal Style</strong></td></tr>
<tr><td>&lt;style type="text/css"&gt;<br>
 selector {property: value;}<br>
&lt;/style&gt;</td></tr>
<tr><td><strong>Inline Style</strong></td></tr>
<tr><td>&lt;tag style="property: value"&gt;
<tag style="property: value"></tag></td></tr>

	    <tr>
        <td></td></tr>
        <tr>
        <td></td></tr>
    </tbody></table>
      <table class="section" border="1">
      <tbody><tr>
        <th colspan="2">GENERAL</th>
      </tr>
      <tr>
        <td> Class</td>
        <td>String preceded by a period</td>
      </tr>
      <tr class="evenrow">
        <td>ID </td>
        <td>String preceded by a hash mark</td>
      </tr>
      <tr>
        <td>div</td>
        <td>Formats structure or block of text </td>
      </tr>
      <tr class="evenrow">
        <td>span</td>
        <td>Inline formatting </td>
      </tr>
      <tr>
        <td>color</td>
        <td>Foreground color</td>
      </tr>
      <tr class="evenrow">
        <td>cursor</td>
        <td>Appearance of the cursor</td>
      </tr>
      <tr>
        <td>display</td>
        <td><div class="values"> block; inline; list-item; none</div></td>
      </tr>
      <tr class="evenrow">
        <td> overflow </td>
        <td>How content overflowing its box is handled
          <div class="values">visible, hidden, scroll, auto</div></td>
      </tr>
      <tr>
        <td>visibility</td>
        <td><div class="values">visible, hidden</div></td>
      </tr>
    </tbody></table>
      <table class="section" border="1">
        <tbody><tr>
          <th colspan="2">FONT</th>
        </tr>
        <tr>
          <td>font-style</td>
          <td><div class="values">Italic, normal </div></td>
        </tr>
        <tr class="evenrow">
          <td>font-variant</td>
          <td><div class="values">normal, small-caps</div></td>
        </tr>
        <tr>
          <td>font-weight</td>
          <td><div class="values">bold, normal, lighter, bolder, integer (100-900)</div></td>
        </tr>
        <tr class="evenrow">
          <td>font-size</td>
          <td>Size of the font</td>
        </tr>
        <tr>
          <td>font-family</td>
          <td>Specific font(s) to be used</td>
        </tr>
      </tbody></table>
      <table class="section" border="1">
        <tbody><tr>
          <th colspan="2">TEXT</th>
        </tr>
        <tr>
          <td>letter-spacing</td>
          <td>Space between letters</td>
        </tr>
        <tr class="evenrow">
          <td>line-height</td>
          <td>Vertical distance between baselines</td>
        </tr>
        <tr>
          <td>text-align</td>
          <td>Horizontal alignment</td>
        </tr>
        <tr class="evenrow">
          <td>text-decoration</td>
          <td><div class="values">blink, line-through, none, overline, underline</div></td>
        </tr>
        <tr>
          <td>text-indent</td>
          <td>First line indentation </td>
        </tr>
        <tr class="evenrow">
          <td>text-transform</td>
          <td><div class="values">capitalize, lowercase, uppercase</div></td>
        </tr>
        <tr>
          <td>vertical-align</td>
          <td>Vertical alignment</td>
        </tr>
        <tr class="evenrow">
          <td>word-spacing</td>
          <td>Spacing between words</td>
        </tr>
      </tbody></table>
</div>

<div id="content2">
 <table class="section" border="1">
      <tbody><tr>
        <th colspan="2">BOX MODEL</th>
      </tr>
      <tr>
        <td><img src="./CSS Cheat Sheet_files/box.gif" alt="CSS Box Model"></td>
		<td>
		height; width;
		margin-top; margin-right; margin-bottom; margin-left;
		 padding-top; padding-right;
          padding-bottom; padding-left;</td>
      </tr>
    </tbody></table>
      <table class="section" border="1">
        <tbody><tr> 
          <th colspan="2">BORDER</th>
        </tr>
		<tr>
		  <td>border-width</td>
	      <td>Width of the border</td>
		</tr>
		<tr class="evenrow">
          <td>border-style</td>
          <td><div class="values">dashed; dotted; double; groove; inset; outset;
              ridge; solid; none</div></td>
	    </tr>
		<tr>
		  <td>border-color</td>
	      <td>Color of the border</td>
		</tr>
      </tbody></table>
      <table class="section" border="1">
        <tbody><tr>
          <th colspan="2">POSITION</th>
        </tr>
        <tr>
          <td>clear</td>
          <td>Any floating elements around the element?
              <div class="values">both, left, right, none</div></td>
        </tr>
        <tr class="evenrow">
          <td>float</td>
          <td>Floats to a specified side
          <div class="values">left, right, none</div></td>
        </tr>
        <tr>
          <td>left</td>
          <td>The left position of an element
            <div class="values">auto, length values (pt, in, cm, px)</div></td>
        </tr>
        <tr class="evenrow">
          <td>top</td>
          <td>The top position of an element
            <div class="values">auto, length values (pt, in, cm, px)</div></td>
        </tr>
        <tr>
          <td> position</td>
          <td><div class="values">static, relative, absolute</div></td>
        </tr>
        <tr class="evenrow">
          <td>z-index </td>
          <td>Element above or below overlapping elements?
              <div class="values">auto, integer (higher numbers on top) </div></td>
        </tr>
      </tbody></table>
      <table class="section" border="1">
        <tbody><tr>
          <th colspan="2">BACKGROUND</th>
        </tr>
        <tr>
          <td>background-color</td>
          <td>Background color</td>
        </tr>
        <tr class="evenrow">
          <td>background-image</td>
          <td>Background image</td>
        </tr>
        <tr>
          <td>background-repeat</td>
          <td><div class="values">repeat, no-repeat, repeat-x, repeat-y</div></td>
        </tr>
        <tr class="evenrow">
          <td>background-attachment</td>
          <td>Background image scroll with the element?
              <div class="values">scroll, fixed</div></td>
        </tr>
        <tr>
          <td>background-position</td>
          <td><div class="values">(x y), top, center, bottom, left, right</div></td>
        </tr>
      </tbody></table>
      <table class="section" border="1">
        <tbody><tr>
          <th colspan="2">LIST</th>
        </tr>
        <tr>
          <td> list-style-type</td>
          <td>Type of bullet or numbering in the list
            <div class="values">disc; circle; square; decimal; lower-roman;
                upper-roman; lower-alpha; upper-alpha; none</div></td>
        </tr>
        <tr class="evenrow">
          <td> list-style-position</td>
          <td>Position of the bullet or number in a list
            <div class="values">inside; outside</div></td>
        </tr>
        <tr>
          <td> list-style-image </td>
          <td>Image to be used as the bullet in a list</td>
        </tr>
        <tr>
          <td colspan="2"></td>
        </tr>
      </tbody></table>
</div>
<div class="floatcontainer">
<div class="exp">* The properties for each selector
      are in the order they should appear when using shorthand notation. </div>
    </div>
  </div>


<div id="sidebar1">
<h3>Shorthand*</h3>
	<hr>
	background<br>
	border<br>
	border-bottom<br>
	border-left<br> 
	border-right<br>
	border-top<br>
	font<br>
	list-style<br>
	margin<br>
	padding
	<br><br>
	  <h3>Comments</h3>
	   <hr>
	   /*  Comment */
	   <br>
	   <br>
	   	   <h3>Pseudo Selectors</h3>
	   <hr>
		:hover<br>
		:active<br>
		:focus<br>
		:link<br>
		:visited<br>
	   :first-line<br>
	   :first-letter
	   <br><br>
	   <h3>Media Types</h3>
      <hr> 
all<br>
braille<br>
embossed<br>
handheld<br>
print<br>
projection<br>
screen<br>
speech<br>
tty<br>
tv<br>
<br>
		<h3>Units</h3>
      <hr> 
	
	   Length
	  %<br>
	   em<br>
	   pt<br>
	   px<br>
		Keywords
	   bolder<br>
	   lighter<br>
	   larger<br>
	 <br>
</div>
</div>



</body></html>